<template>
<div>
  <div id="top">
    <div id="topBar">
      <router-link :to="{path:'/exchangePoints'}"><van-icon name="arrow-left" style="float: left;margin-top: 0.5rem;margin-left: 0.5rem"/>
        <p style="float: left">详情</p></router-link>
    </div>
  </div>
  <div id="middle">
    <van-image
      width="100%"
      height="12.5rem"
      fit="cover"
      :src="pic"
    />
    <div id="points">
    <p id="price">
      {{price}}
    </p>
    <p style="font-size: 0.8rem;height: 1.8rem;line-height: 1.8rem;float: left">积分</p>
    </div>
  </div>
  <div id="foot">
    <p id="title">
      兑换须知
    </p>
    <p id="content">
    </p>
  </div>
  <div id="box">
    <router-link :to="{path:'/exchangePoints/exchange'}">
   <div id="button">
     立即兑换
   </div>
    </router-link>
  </div>
</div>
</template>

<script>
    export default {
        name: "detail",
      data(){
          return{
            pic:'https://img.yzcdn.cn/vant/cat.jpeg',
            price:'2385',
          }
      }
    }
</script>

<style scoped>
  p{
    display: inline-block;
  }
  #top{
    width: 100%;
    height:4rem;
    background: red;
    overflow: hidden;
    position: relative;
  }
  #topBar{
    height: 2rem;
    width: 100%;
    line-height: 2rem;
    background: papayawhip;
    color:black;
    font-size: 1rem;
    margin-top: 1rem;
  }
  #topBar p{
    display: inline-block;
  }
  #middle{
    width: 100%;
  }
  #points{
    width: 100%;
    margin-top: 0.5rem;
    height: 1.8rem;
  }
  #price{
    display: float;
    font-weight: bold;
    color: #39a9ed;
    margin-left: 1rem;
    font-size: 1.8rem;
    line-height: 1.8rem;
    float: left;
    margin-right: 1rem;
  }
  #foot{
    background: #39a9ed;
    width: 100%;
    padding: 0.8rem 0.8rem;
    box-sizing: border-box;
    color: white;
    margin-top: 0.5rem;
    overflow: hidden;
    height: 22rem;
  }
  #title{
    font-size: 1rem;
    float: left;
    font-weight: bold;
    letter-spacing: 0.1rem;
  }
  #content{
    height: 50rem;
    background: red;
    overflow-y:scroll;
    width: 100%;
    padding: 0.5rem 0rem;
    box-sizing: border-box;
  }
  #box{
    height: 3.5rem;
    width: 100%;
    background: white;
    display: absolute;
    bottom: 0;
    position: fixed;
  }
  #button{
    height: 1.8rem;
    border: 0.2rem solid #39a9ed;
    border-radius: 0.1rem;
    background: white;
    width: 80%;
    font-size: 1rem;
    color: #39a9ed;
    font-weight: bold;
    letter-spacing: 0.1rem;
    line-height: 1.8rem;
    margin: 0 auto;
    margin-top: 0.8rem;
  }
</style>
